import React,{Component} from 'react';
import {Row,Col} from 'antd';
import PropTypes from 'prop-types';
import './iconList.less';
const prefix = 'icon-list';
class IconList extends Component{
    render(){
        let {title,iconSource,titleColor,themColor,iconHeight,fontColor,iconStyle,justify,gutter} = this.props;
        return(
            <div className={prefix} style={{background:themColor?themColor:'#fff'}}>
                <div className={prefix+'-container'}>
                    <h1 style={{color:titleColor?titleColor:null}}>
                        {title}
                        <i className={prefix+'-after'} style={{background:titleColor?titleColor:null}}></i>
                    </h1>
                    <Row type="flex" justify={justify} align="top" gutter={gutter}>
                        {iconSource.map((value,index)=>{
                            return(
                                <Col key={index} className={prefix+'-col'} style={Object.assign({color:titleColor?titleColor:null,marginBottom:'10px'},iconStyle)}>
                                    <p className={prefix+'-index'}>{value.index}</p>
                                    <div className={prefix+'-img-container'} style={{height:iconHeight,lineHeight:iconHeight}}>
                                        <img src={value.src} alt=""/>
                                    </div>
                                    <p style={{color:fontColor?fontColor:null}}>{value.content}</p>
                                </Col>
                            )
                        })}
                    </Row>
                </div>
            </div>
        )
    }
}
export default IconList;
IconList.propTypes = {
    title:PropTypes.string.isRequired,
    iconSource:PropTypes.array.isRequired,
    titleColor:PropTypes.string,
    themColor:PropTypes.string,
    fontColor:PropTypes.string,
    iconHeight:PropTypes.string,
    iconStyle:PropTypes.object,
    justify:PropTypes.string,
    gutter:PropTypes.number
};
IconList.defaultProps = {
    iconHeight:"120px",
    justify:"space-between"
}